<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>淄川区工程项目规划实施落地一张图系统</title>
  <meta name="keywords" content="规划一张图" />
  <meta name="description" content="淄川区工程项目规划实施落地一张图系统" />
  <link rel="stylesheet" href="./resource/bootstrap/css/bootstrap.min.css">
  <script src="./resource/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./resource/ol/ol.css">
  <script src="./resource/ol/ol.js"></script>
  <style>
    html,
    body {
      min-width: 1000px;
    }

    .head {
      height: 50px;
      background-color: #099;
    }

    .layout {
      position: absolute;
      display: flex;
      width: 100%;
      height: 100vh;
    }

    .aside {
      bottom: -5550px;
      width: 350px;
      min-width: 260px;
      height: 100%;
      overflow-y: auto;
    }

    .article {
      min-width: 1000px;
      flex: 1;
      height: 100%;
      overflow-y: auto;
      background-color: #0f9;
    }

    /* 鼠标位置控件层样式设置 */
    #mouse-position {
      float: right;
      position: absolute;
      bottom: 55px;
      /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
      z-index: 2000;
    }

    /* 鼠标位置信息自定义样式设置 */
    .custom-mouse-position {
      color: rgb(87, 17, 218);
      font-size: 16px;
      font-family: "微软雅黑";
    }

    #menu {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 15px;
      z-index: 2000;
    }

    .container {
      /*position: relative;*/
    }

    .top-aligned {
      position: absolute;
      top: 10px;
      /* 距离容器顶部10像素 */
      right: 10px;
      /* 距离容器左侧50像素 */
      /* 更多样式如宽度、背景色等 */
      width: 270px;
      background-color: #f0f0f0;
      padding: 10px;
      box-shadow: 0 0 5px #000;
    }

    .ol-popup {
      position: absolute;
      background-color: white;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      filter: drop-shadow(0 1px 4px #FFC125);
      padding: 15px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      min-width: 260px;
    }

    .ol-popup:after,
    .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }

    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }

    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
      color: red;
    }

    .ol-popup-closer:after {
      content: "✖";
    }

    #layerscontrol {
      position: absolute;
      right: 10px;
      top: 60px;
      font-size: 15px;
      z-index: 2000;
      opacity: 0.9;
    }
  </style>
</head>

<body>
  <div class="" style="width: 100%;position: fixed;">
    <div class="head">
      <div style="margin-left: 10px;font-size: 30px; font-weight: 600;color: #ffffff;">淄川区工程项目规划实施落地一张图系统</div>
    </div>
    <div class="layout">
      <aside class="aside" style="padding: 10px 10px;">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="档案名、编号">
          <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2" style="cursor: pointer;">搜索</span>
          </div>
        </div>
        <div class="" style="position:sticky; bottom: 55px;">
          <ul class="list-group">
            <li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;">
              <a href="./pdf/web/viewer.html?file=http://localhost/dangan/2.pdf" target="_blank">建了一个房子的档案个档案盒子</a>
              <img src="images/location.png" title="定位到工程点" style="width: 18px; height: 21px;cursor: pointer;"
                onclick="toPoint();">
            </li>
            <li class="list-group-item"><a href="./pdf/web/viewer.html?file=http://localhost/dangan/淄博高新区国土空间大数据平台建设方案汇报V5.2论证后修改完整版--20211105.pdf" target="_blank">一个档案浏览的样子</a></li>
            <li class="list-group-item"><a href="#">请叫我档案</a></li>
            <li class="list-group-item"><a href="#">档案编号ZCu03u423uire</a></li>
            <li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;">
              <a href="./pdf/web/viewer.html" target="_blank">建了一个房子的档案个档案盒子</a>
              <img src="images/location.png" title="定位到工程点" style="width: 18px; height: 21px;cursor: pointer;"
                onclick="toPoint();">
            </li>
            <li class="list-group-item"><a href="./pdf/web/viewer.html" target="_blank">一个档案浏览的样子</a></li>
            <li class="list-group-item"><a href="#">请叫我档案</a></li>
            <li class="list-group-item"><a href="#">档案编号ZCu03u423uire</a></li>
            <li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;">
              <a href="./pdf/web/viewer.html" target="_blank">建了一个房子的档案个档案盒子</a>
              <img src="images/location.png" title="定位到工程点" style="width: 18px; height: 21px;cursor: pointer;"
                onclick="toPoint();">
            </li>
            <li class="list-group-item"><a href="./pdf/web/viewer.html" target="_blank">一个档案浏览的样子</a></li>
            <li class="list-group-item"><a href="#">请叫我档案</a></li>
            <li class="list-group-item"><a href="#">档案编号ZCu03u423uire</a></li>
            <li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;">
              <a href="./pdf/web/viewer.html" target="_blank">建了一个房子的档案个档案盒子</a>
              <img src="images/location.png" title="定位到工程点" style="width: 18px; height: 21px;cursor: pointer;"
                onclick="toPoint();">
            </li>
            <li class="list-group-item"><a href="./pdf/web/viewer.html" target="_blank">一个档案浏览的样子</a></li>
            <li class="list-group-item"><a href="#">请叫我档案</a></li>
            <li class="list-group-item"><a href="#">档案编号ZCu03u423uire</a></li>
            <li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;">
              <a href="./pdf/web/viewer.html" target="_blank">建了一个房子的档案个档案盒子</a>
              <img src="images/location.png" title="定位到工程点" style="width: 18px; height: 21px;cursor: pointer;"
                onclick="toPoint();">
            </li>
            <li class="list-group-item"><a href="./pdf/web/viewer.html" target="_blank">一个档案浏览的样子</a></li>
            <li class="list-group-item"><a href="#">请叫我档案</a></li>
            <li class="list-group-item"><a href="#">档案编号ZCu03u423uire</a></li>
          <ul>
        </div>
      </aside>
      <article class="article">

        <!-- 地图容器 -->
        <div id="map" class="map"></div>

        <!-- 鼠标位置信息 -->
        <div id="mouse-position"></div>

        <!-- 菜单 -->
        <div id="menu">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-secondary opacity-75">
              <input type="checkbox" checked autocomplete="off" id="allPoint" onclick="checkAddAllPoint();"> 工程点
            </label>
            <label class="btn btn-secondary opacity-75">
              <input type="checkbox" autocomplete="off" id="allText" onclick="checkAddAllText();"> 工程名
            </label>
            <label class="btn btn-secondary opacity-75">
              <input type="checkbox" autocomplete="off" id="layersM" onclick="layersmanger();"> 图层管理
            </label>
            <label class="btn btn-secondary opacity-75" id="restore">复位</label>
          </div>
        </div>

        <!-- 图层管理 -->
        <div id="layerscontrol" style="display: none;">
          <div class="card">
            <h6 class="card-header">图层管理</h6>
            <div class="card-body">
              <div class="" style="display:flex; flex-direction: column;" data-toggle="buttons">
                <div>
                  <label class="btn  opacity-75">
                    <input type="checkbox" checked autocomplete="off" id="luwang" onclick="checkLuWang();"> 路网
                  </label>
                  <input type="range" class="form-range" min="0" max="1" step="0.1" id="lwOpacity" value="1">
                </div>
                <div>
                  <label class="btn opacity-75">
                    <input type="checkbox" autocomplete="off" id="yingXiang" onclick="checkYingXiang()"> 影像
                  </label>
                  <input type="range" class="form-range" min="0" max="1" step="0.1" id="yxOpacity" value="1">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 弹出图层，跟随经纬度 -->
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content"></div>
          <div id="name" style="font-weight:600;"></div>
          <div id="bianma"></div>
          <div id="dizhi"></div>
          <div id="guishu"></div>
          <div id="wendang"></div>
          <div id="jingdu"></div>
          <div id="weidu"></div>
        </div>

      </article>
    </div>
  </div>

  <script type="text/javascript">

    // 创建数据源
    var source = new ol.source.Vector({
      wrapX: false,
      // url: "http://localhost:8080/openLayers/data/KML/2012-02-10.kml",
      // format: new ol.format.KML()
    });

    // 获取后台数据
    // $.ajax({
    //     type: 'get',
    //     url: 'ashx/GetDataHandler.ashx',
    //     dataType: 'json',
    //     async: false,
    //     cache: false,
    //     success: function (data) {
    //         for (var i = 0; i < data.length; i++) {
    //             var feature = new ol.Feature({
    //                 geometry: new ol.geom.Point([data[i].Longitude, data[i].Latitude]),
    //                 cityName: data[i].CityName,
    //                 provinceCode: data[i].ProvinceCode,
    //                 pinyin: data[i].Pinyin,
    //                 attribution: data[i].Attribution,
    //                 cityCode: data[i].CityCode,
    //                 postCode: data[i].PostCode,
    //                 longitude: data[i].Longitude,
    //                 latitude: data[i].Latitude
    //             });
    //             source.addFeature(feature);
    //         }
    //     }
    // });

    var data = [{ "longitude": "117.966", "latitude": "36.649" },
    { "longitude": "117.969", "latitude": "36.659" },
    { "longitude": "117.869", "latitude": "36.559" }
    ];

    for (var i = 0; i < data.length; i++) {
      var feature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([data[i].longitude, data[i].latitude], 'EPSG:4326', 'EPSG:3857')),
        longitude: data[i].longitude,
        latitude: data[i].latitude
      });
      source.addFeature(feature);
    }

    /** 创建要添加的图层**/
    // 创建图层：路网
    const MapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        // 设置本地离线瓦片所在路径
        url: 'mapabc/roadmap' + '/{z}/{x}/{y}.png',
      })
    });

    // 创建图层：影像
    const YXMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        // 设置本地离线瓦片所在路径
        url: 'mapabc/satellite' + '/{z}/{x}/{y}.jpg',
      })
    });

    // 创建图层：定位符
    var location_layer = new ol.layer.Vector({
      source: source, // 位置
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.1, 60],
          anchorOrigin: 'top-right',
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          offsetOrigin: 'top-right',
          // offset:[0,10],
          //图标缩放比例
          scale: 0.7,
          //透明度
          opacity: 0.9,
          //图标的url
          src: 'images/blueIcon.png'
        }),
      }),
      zIndex: 999,
    });

    /**** 创建地图视图 ****/
    // 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标
    let centerPos = ol.proj.transform([117.96, 36.64], 'EPSG:4326', 'EPSG:3857');
    let zoom = 13;
    var view = new ol.View({
      center: centerPos, //地图中心位置
      zoom: zoom, //地图初始层级
      maxZoom: 18,
      minZoom: 1
    })

    const mousePositionControl = new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4),
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
    });

    //创建地图,把地图挂接到容器上
    let map = new ol.Map({
      target: 'map',
      layers: [MapLayer, location_layer],
      view: view,
      controls: ol.control.defaults.defaults().extend([mousePositionControl]),
    });

    /*** 弹出对话框 ***/
    // 获取popup的dom对象
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

    /***
    ** 隐藏Overlay可使用Overlay.getElement().style.display = 'none'。
    ** 彻底删除Overlay使用Overlay.setMap(null)。
    ***/

    // 创建popup
    var popup = new ol.Overlay({
      element: container, // 指定Overlay使用的DOM元素
      autoPan: true, // 如果弹框不在视口范围内，自动移动地图，让其可见
      positioning: 'bottom-center', // 用于设置弹框相对于传入坐标点的位置
      stopEvent: false, // 是否停止事件传播
      autoPanAnimation: {
        duration: 99
      }
    });
    map.addOverlay(popup);

    // 关闭popup
    closer.onclick = function () {
      popup.setPosition(undefined);
      closer.blur();
      return false;
    };

    // 监听鼠标单击事件，点击feature后弹出popup
    map.on('click', function (e) {
      var coordinate = e.coordinate;
      // console.log("e:" + e);
      // console.log("coordinate:" + coordinate);
      var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        // console.log("feature:" + JSON.stringify(feature));
        return feature;
      });
      if (feature) {
        // 清空html
        // content.innerHTML = '';

        // 城市名称
        // var cityName = document.createElement('h2');
        // cityName.innerText = feature.get('cityName');
        // content.appendChild(cityName);

        // 标题
        var name = document.getElementById('name');
        name.innerText = '工程名称';
        content.appendChild(name);

        // 编码
        var bianma = document.getElementById('bianma');
        bianma.innerText = '编码：' + 'ZC-20240321';
        content.appendChild(bianma);

        // 位置
        var dizhi = document.getElementById('dizhi');
        dizhi.innerText = '地址：' + '淄川区某某地点';
        content.appendChild(dizhi);

        // 归属
        var guishu = document.getElementById('guishu');
        guishu.innerText = '归属：' + '某某工程有限公司';
        content.appendChild(guishu);

        var wendang = document.getElementById('wendang');
        wendang.innerHTML = '文档：' + '<a href="./pdf/web/viewer.html?file=http://localhost/dangan/2.pdf" target="_blank">查看工程文档</a>';
        content.appendChild(wendang);

        // 经度
        var jingdu = document.getElementById('jingdu');
        jingdu.innerText = '负责人：川淄';
        content.appendChild(jingdu);

        // 纬度
        var weidu = document.getElementById('weidu');
        weidu.innerText = '日期：2024-3-23';
        content.appendChild(weidu);

        // 在坐标位置弹出popup
        popup.setPosition(coordinate);
      }
    });

    /**** 监听鼠标移动事件 ****/
    map.on('pointermove', function (e) {
      // 鼠标移动到feature区域时变为手形
      var pixel = map.getEventPixel(e.originalEvent);
      var hit = map.hasFeatureAtPixel(pixel);
      map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      // 显示坐标
      // const coordinate = e.coordinate; // 获取当前鼠标位置坐标
    });

    /*** 设置图层的透明度 ***/
    // 设置路网图层的透明度
    document.addEventListener("mousemove", function () {
      // 获取输入框的值
      var lwOpacity = parseFloat(document.getElementById('lwOpacity').value);
      console.log(lwOpacity); // 输出输入框的值
      MapLayer.setOpacity(lwOpacity);
    });

    // 设置影像图层的透明度
    document.addEventListener("mousemove", function () {
      // 获取输入框的值
      var yxOpacity = parseFloat(document.getElementById('yxOpacity').value);
      console.log(yxOpacity); // 输出输入框的值
      YXMapLayer.setOpacity(yxOpacity);
    });



  </script>
  <script src="./resource/olinclude/function.js"></script>
</body>

</html>